<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询页</title>
    <!-- 前端调用服务器数据 -->
    <style>
        table{
            border-collapse: collapse;
            width: 400px;
        }
        th,td{
            border: 1px solid salmon;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        /* // 原生Ajax
        // 创建对象
        let xhr = new XMLHttpRequest()
        // 创建请求
        xhr.open("GET","http://127.0.0.1:8080/userInfor")
        // 发送请求
        xhr.send()
        // 接收响应，监听状态
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.response);
            }
        } */

        // jQuery 做法
        $.get("http://127.0.0.1:8080/userInfor",res=>{
            // 如果需要在html文件中 输出数据 
            // 需要在服务器文件中  加上允许跨域的请求
            // Ajax 要遵循 同源策略
            //  sever - index1 里面的 
            // 同源策略 请求的协议名，域名，端口号 和当前文件的地址要完全一样
            // 前后端项目是分离的 三者不可能一样 所以需要跨域请求
            // console.log(res);

            // 填写值
            res.forEach(item => {
                let tr = $(`
                <tr>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>
                        <button>编辑</button>
                        <button>删除</button>
                    </td>
                </tr>
                `)
                $("#tbody").append(tr)
            });
        })
    </script>
</body>
</html>